<template>
  <div class="container">
    <div class="myheader">
      <!-- logo AND 导航 -->
      <div class="headerBox">
        <!-- logo -->
        <div class="titleBox">
          <div class="logo"><img class="logoImage" src="../assets/header-logo.png" alt="" /></div>
          <div class="font">一道云</div>
        </div>
        <!-- 导航 -->
        <div class="navigation">
          <div class="navProduct" :class="ter[index]" v-for="(nav, index) in navigation" :key="'nav' + index">
            <div class="text">{{ nav.title }}</div>
            <img class="image" src="../assets/arrow.png" alt="" />
          </div>
          <!-- 产品服务下拉框 -->
          <div class="product" id="product-one">
            <div class="productBox">
              <div class="productName">产品服务</div>
              <div class="line"></div>
              <div class="productPlateBox">
                <div class="productPlateOne" v-for="(product, index) in productType" :key="'product' + index">
                  <div class="imageBox"><img class="image" :src="product.url" alt="" /></div>
                  <div class="productFont">{{ product.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 解决方案下拉框 -->
          <div class="product" id="product-two">
            <div class="productBox">
              <div class="productName">解决方案</div>
              <div class="line"></div>
              <div class="productPlateBox-Two">
                <div class="productPlate" v-for="(producttwo, index) in productTypeTwo" :key="'producttwo' + index">
                  <img class="image-Two" :src="producttwo.url" alt="" />
                  <div class="productFontTwo">{{ producttwo.name }}</div>
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tipTitle: '友情提示',
      message: 'hello world',
      navigation: [{ title: '产品服务' }, { title: '解决方案' }, { title: '咨询资源' }, { title: '关于我们' }],
      productType: [
        { url: require('../assets/product-admin.png'), name: '实训平台' },
        { url: require('../assets/product-competition.png'), name: '实训平台' },
        { url: require('../assets/product-admin.png'), name: '实训平台' },
        { url: require('../assets/product-course.png'), name: '实训平台' },
      ],
      productTypeTwo: [
        { url: require('../assets/solve-one.png'), name: '综合实训基地' },
        { url: require('../assets/solve-two.png'), name: '中国特色企业新型学徒制' },
        { url: require('../assets/solve-three.png'), name: '“双师”队伍建设' },
        { url: require('../assets/solve-four.png'), name: '职业技能培训' },
        { url: require('../assets/solve-five.png'), name: '华为鲲膑教育项目' },
        { url: require('../assets/solve-six.png'), name: '资源库/教材开发' },
      ],
      ter: ['s1', 's2'],
    };
  },
  created() {},
  methods: {
    // one() {
    //   console.log(this.showProduct);
    // },
  },
};
</script>

<style>
.myheader {
  width: 100%;
  height: 73px;
  display: flex;
  justify-content: center;
  position: relative;
}
.headerBox {
  width: 1200px;
  height: 73px;
  display: flex;
}
.titleBox {
  width: 146px;
  height: 33px;
  display: flex;
  margin: 20px 0 20px 0;
}

.titleBox .logo .logoImage {
  width: 66px;
  height: 33px;
  margin-right: 10px;
}
.titleBox .font {
  width: 75px;
  height: 24px;
  font-size: 20px;
  font-weight: bold;
  color: #2e71fe;
}
/* 导航 */
.navigation {
  width: 580px;
  height: 72px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  margin-left: 165px;
}

/* 第一个 */
.navigation .navProduct {
  width: 145px;
  height: 73px;
  color: #000;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.navigation .navProduct .image {
  width: 10px;
  height: 6px;
  margin: 3px 0 0 0;
}
.navigation .navProduct .text {
  width: 67px;
  height: 23px;
  font-size: 15px;
}
.navigation .navProduct:hover {
  width: 145px;
  height: 73px;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2e71fe;
  z-index: 999;
}

.navProduct:hover::after {
  content: '';
  border: 6px solid transparent;
  border-bottom: 6px solid white;
  height: 0;
  width: 0;
  display: block;
  margin: 60px 0 0 0;
  position: absolute;
}
/* 这是分类的板块 */
.product {
  top: 100%;
  width: 100%;
  height: 300px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 -5px 15px #d3d1d1; /*上边阴影*/
  position: absolute;
  z-index: 1;
}
.productBox {
  margin: 0 auto;
  width: 1200px;
  height: 300px;
}
.product .productBox .productName {
  width: 63px;
  height: 51px;
  color: #000;
  font-weight: 600;
  padding: 16px 0 16px 0;
}
.product .line {
  width: 1200px;
  border-top: 1px solid rgb(231, 231, 231);
}
.product .productPlateBox {
  width: 1200px;
  height: 248px;
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
}
.productPlateBox .productPlateOne {
  width: 188px;
  height: 168px;
  border: 1px solid rgb(239, 239, 239);
  border-radius: 5%;
  margin: auto;
}
.productPlateOne .imageBox {
  width: 95px;
  height: 90px;
  margin: 7% 23%;
}
.productPlateOne .imageBox .image {
  width: 95px;
  height: 90px;
}
.productPlateOne .productFont {
  width: 74px;
  height: 20px;
  font-size: 17px;
  font-weight: 550;
  margin: auto;
}

/* 第二块 */
.productPlateBox-Two {
  width: 1200px;
  height: 248px;
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
  padding: 20px 40px;
}
.productPlate {
  width: 312px;
  height: 80px;
  display: flex;
}
.productPlate .image-Two {
  display: flex;
  width: 50px;
  height: 46px;
  margin-top: 18px;
}
.productFontTwo {
  font-size: 17px;
  color: #000;
  width: 268px;
  height: 80px;
  padding-left: 20px;
  line-height: 80px;
  font-weight: 400;
}
#product-one {
  display: none;
}
#product-two {
  display: none;
}
.navProduct.s1:hover ~ #product-one {
  display: block;
}
#product-one:hover {
  display: block;
}
.navProduct.s2:hover ~ #product-two {
  display: block;
}
#product-two:hover {
  display: block;
}
</style>